<template>
  <div class="header">
    <div class="left" @click="router.push('/admin/index')">
      <div class="logo">
        <!-- <img src="" alt="logo" /> -->
      </div>
      <span>{{ title }}</span>
    </div>
    <div class="right">
      <div class="user-info">
        <el-dropdown trigger="hover" @command="handleCommand">
          <span class="user-info-box">
            <img src="@/assets/images/logo.png" alt="" />
            <span class="user-name">{{ userName }}</span>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">个人信息</el-dropdown-item>
              <el-dropdown-item command="2">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { watch, onMounted, ref, reactive, computed } from 'vue'
  import { storeToRefs } from 'pinia'
  import Storage from '@/assets/js/storage'
  import { ElMessage } from 'element-plus'
  import { userInfoStore, loginStore } from '@/stores'
  import { useRouter, useRoute } from 'vue-router'

  const router = useRouter()
  const route = useRoute()
  const useUserInfoStore = userInfoStore()
  const useLoginStore = loginStore()

  const props = defineProps({
    title: {
      type: String,
      required: true
    }
  })

  const userName = computed(() => {
    return useUserInfoStore.userName
  })
  const phonenumber = computed(() => {
    return useUserInfoStore.phonenumber
  })
  // 下拉菜单
  const handleCommand = (command: string | number | object) => {
    switch (command) {
      case '1':
        ElMessage.info('个人中心')
        break;
      case '2':
        logOut()
        break;
    }
  }

  // 退出登录
  const logOut = () => {
    const params = {
      phonenumber: phonenumber.value
    }
    useLoginStore.logout(params).then((res: any) => {
      const { state, body} = res
      if (state === 'OK') {
        router.push({ path: '/login' })
      } else {
        ElMessage.error(res.message || '操作异常')
      }
    })
    .catch((error: any) => {
        ElMessage.error(error.errorMessage)
    })
  }

    // 获取用户信息
  const getUserInfo = () => {
    const params = {
      userId: useLoginStore.userId || Storage.get('userId')
    }
    useUserInfoStore.getUserInfo(params).then((res: any) => {
      const { state, body} = res
      if (state === 'OK') {
      } else {
        ElMessage.error(res.message || '操作异常')
      }
    })
    .catch((error: any) => {
        ElMessage.error(error.errorMessage || '获取用户信息异常')
    })
  }

  onMounted(() => {
    getUserInfo()
  })
</script>
<style lang="scss" scoped>
@use '@/assets/style/variable' as *;
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: $whiteColor;
  border-bottom: 1px solid #f0f5fa;
  .left {
    float: left;
    cursor: pointer;
    .logo {
      display: inline-block;
      width: 30px;
      height: 30px;
      vertical-align: middle;
      img {
        width: 100%;
        height: 100%;
      }
    }
    span {
      font-size: 16px;
      font-weight: 600;
      vertical-align: middle;
    }
  }
  .right {
    float: right;
    .user-info {
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      &:hover {
        .user-name {
          color: #337DFF;
        }
        .el-icon--right {
          color: #337DFF;
          transform: rotate(180deg);
        }
      }
      .user-info-box {
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        line-height: 40px;
        transition: all 0.3s ease-in-out;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
          margin-right: 5px;
        }
        span {
          font-size: 14px;
          vertical-align: middle;
        }
        i {
          font-size: 12px;
          vertical-align: middle
        }
      }
    }
  }
}
</style>